<template>
	<view class="content">
		<!-- F1：（列表）缴费金额 -->
		<uni-list class="list">
			<uni-list-item :title="type|feeType" :thumb="type|feeTypeIcon" thumbSize="lg">
				<!-- 使用列表项提供的“右侧”插槽 -->
				<template v-slot:footer>
					<view class="list-item-footer">
						<input v-model="amount" type="digit" placeholder="请输入缴费金额"/>
						<text>元</text>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		
		<!-- F2：（列表）缴费细则 -->
		<uni-list class="list">
			<!-- showArrow：是否在列表项右侧显示一个小箭头 -->
			<uni-list-item title="缴费单位" :showArrow="true">
				<template v-slot:footer>
					<view @click="openPopup" class="list-item-footer">
						<text>{{collectors.length>0 && collectors[curCollector].cname}}</text>
					</view>
				</template>				
			</uni-list-item>
			<uni-list-item title="用户编号">
				<template v-slot:footer>
					<view class="list-item-footer">
						<input v-model="userIdInput" type="text" placeholder="请输入用户编号" @input="doUserIdChange"/>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:header>
					<view class="list-item-header">
						<text>户名</text>
					</view>
				</template>
				<template v-slot:footer>
					<view class="list-item-footer">
						<text>{{household.householdName}}</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="用户住址">
				<template v-slot:footer>
					<view class="list-item-footer">
						<text>{{household.householdAddr}}</text>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		
		<!-- F3：按钮 -->
		<button class="btn" @click="doPay">立即缴费</button>
		
		<!-- F4：缴费单位选择弹出框（默认初始时不可见） -->
		<uni-popup ref="collectorPopup">
			<view class="collector-popup">
				<!-- 1.弹出框的头部 -->
				<view class="header">
					<text>缴费单位</text>
				</view>
				<!-- 2.弹出框的主体 -->
				<view class="body">
					<radio-group class="collector-group" @change="tmpCollector=Number($event.detail.value)">
						<label class="collector-item" v-for="(c,i) in collectors" :key="i">
							<text>{{c.cname}}</text>
							<radio :value="String(i)" :checked="curCollector===i"/>
						</label>
					</radio-group>
				</view>
				<!-- 3.弹出框的尾部 -->
				<view class="footer">
					<button class="popup-btn" @click="$refs.collectorPopup.close()">取消</button>
					<button class="popup-btn" @click="saveChosenCollector">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { feeAdd, feeCollector, householdQuery } from '@/service'
	export default {
		data() {
			return {
				type: 0,		//要缴费的类型
				amount: "",		//缴费金额
				collectors:[],		//缴费单位列表
				curCollector: 0,	//当前用户选中的缴费单位
				tmpCollector: 0,    //用户在缴费单位列表中临时选中的项
				userIdTimer: null,	//用于“缴费用户编号输入框”防抖的定时器
				userIdInput:"",		//“缴费用户编号输入框”中的值
				household: {},		//根据用户输入的缴费编号查询到的业主信息
			}
		},
		//生命周期方法 —— 页面加载时
		async onLoad( {type} ){
			// console.log('上个页面传递来的路由参数：', type)
			//在开发阶段，如果直接显示当前页面，就不会传递来type；跳转到“物业缴费”页面
			if(!type){
				uni.navigateTo({url: '/pages/property-fee/property-fee'})
				return
			}
			this.type = Number(type) //查询字符串传来的数据都是“字符串”，此处需要解析为整数
			//向服务器端异步请求当前缴费类别对应的收费单位
			let data = await feeCollector(this.type)
			// console.log(data)
			this.collectors = data
		},
		methods: {
			//执行“立即缴费”功能
			async doPay(){
				//验证当前是否输入了缴费金额
				let amount = this.amount.trim()
				if(!amount){
					uni.showToast({
						title: '付款金额不能为空',
						icon: 'error',
						duration:3000
					})
					return 
				}
				//验证当前是否选中了某个业主账户
				if(!this.household.householdName){
					uni.showToast({
						title:'请输入合法的用户编号',
						icon: 'error',
						duration: 3000
					})
					return								//11:19
				}
				//缴费信息提交给服务器
				let data = await feeAdd(this.type, this.collectors[this.curCollector].cid, this.household.householdId, this.amount)
				console.log(data)
				if(data.code===2000){	//新的缴费记录保存成功
					uni.showToast({
						title:'缴费成功',
						icon: 'success',
						duration: 3000
					})
					//此处可以根据业务需要，清除或保留当前的用户输入
				}else {
					uni.showModal({
						title:'失败',
						content:'缴费失败！服务器返回错误：'+data.msg
					})
				}
			},
			//打开“缴费单位选择”弹出框
			openPopup(){
				// this.$refs.collectorPopup.open('top')
				// this.$refs.collectorPopup.open('bottom')
				// this.$refs.collectorPopup.open('left')
				// this.$refs.collectorPopup.open('right')
				this.$refs.collectorPopup.open('center')
			},
			//保存选中的缴费单位
			saveChosenCollector(){
				//console.log(this.tmpCollector)
				//console.log(typeof this.tmpCollector)
				//把临时选中的缴费单位序号保存到“当前选中的缴费单位序号”
				this.curCollector = this.tmpCollector
				//关闭弹出框
				this.$refs.collectorPopup.close()
			},
			//处理用户输入(缴费用户编号)的改变		
			doUserIdChange(){
				//如果之前还有未执行的定时器任务，则先清除掉
				if(this.userIdTimer){
					clearTimeout(this.userIdTimer)  //①停止定时器倒计时
					this.userIdTimer = null			//②让定时器重新变为空
				}
				//重新定时
				this.userIdTimer = setTimeout(async ()=>{	
					let uid = this.userIdInput.trim()
					if(uid.length>3){  //根据业务背景，“缴费用户编号”不可能短于3位
						console.log('发起服务器接口请求');
						let data = await  householdQuery(uid)
						// console.log(data);
						if(data.code===2000){	//成功查询到业主信息
							this.household = data.msg
						}else {  //无法根据用户编号查询到业主信息
							this.household = {}
							//TODO: 此处可以显示一个吐司对话框
						}
					}
				}, 2000)
			},
		}			
	}
</script>

<style lang="scss" scoped>
.list {
	margin-top: $uni-spacing-col-lg;
	.list-item-header {
		font-size: $uni-font-size-base;
		text {
			// width: 4em;
			width: $uni-font-size-base * 4;
			//文字在空间中两端调整(justify)对齐
			//text-align: justify;
			//text-align-last: justify;
			@include text-justify;
		}
	}
	.list-item-footer {
		//弹性容器中的子元素在交叉轴上居中
		align-items: center;
		input {
			text-align: right;
			font-size: $uni-font-size-base;
			margin-right: $uni-spacing-row-base;
		}
		text {font-size: $uni-font-size-base;}
	}
}

.btn {
	background-color: $zh-theme-dark;
	color: $uni-text-color-inverse;
	font-size: $uni-font-size-lg;
	margin: $uni-spacing-col-lg*3  $uni-spacing-row-lg  0;
	&:active {
		background-color: darken($zh-theme-dark, 5%);
	}
}

.collector-popup {
	//弹性容器主轴方向：纵向
	flex-direction: column;
	//最小宽度
	min-width: 500rpx;
	.header {
		background-color: $zh-theme-dark;
		color: $uni-text-color-inverse;
		//弹性容器中的子元素在主轴上居中对齐	
		justify-content: center;
		padding: $uni-spacing-col-lg  0;
	}
	.body {
		background-color: $uni-bg-color-grey;
		.collector-group {
			//尺寸增长权重为：1
			flex: 1;
			//显示模式：弹性容器
			display: flex;
			flex-direction: column;
			.collector-item {
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				//显示模式：弹性容器
				display: flex;
				border-bottom: 1px solid darken($uni-border-color, 5%);
				text {
					//尺寸增长权重：1
					flex: 1;
				}
			}
		}
	}
	.footer {
		background-color: $uni-bg-color-grey;
		border-top: 1px solid lighten($zh-grey-light,10%);
		box-shadow: 0 0 10rpx lighten($zh-grey-light,10%);
		//弹性容器中的子元素在主轴方向上：空白包围
		justify-content: space-around;
		padding: $uni-spacing-col-lg 0;
		.popup-btn {
			font-size: $uni-font-size-base;
		}
	}
}
</style>
